<template>
  <div>
    <div class="flex justify-center py-7.5">
      <div
        class="flex flex-col justify-center items-center mx-5 rounded-md h-20 w-20 relative transition ease-in-out duration-300 transform"
        :class="
          props.indexMainList == item.id
            ? ' text-indigo-600  bg-opacity-40 bg-gray-500 hover:-translate-y-1'
            : ' hover:text-indigo-600 hover:-translate-y-1 hover:bg-opacity-40 hover:bg-gray-500'
        "
        v-for="item in props.data"
        :key="item.id"
        @click="onHandleList(item.arrKey, item.id)"
      >
        <div style="width: 40px">
          <img class="h-full" :src="item.Icon" />
        </div>
        <div class="text-sm mt-2.5"> {{ item.name }} </div>
        <div
          class="absolute px-2.5 -right-4 -top-1.5 text-xs rounded-3xl"
          :class="
            props.indexMainList == item.id
              ? ' bg-indigo-600  text-white'
              : ' bg-white  text-indigo-600'
          "
        >
          {{ item.num }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 接收数据
const props = defineProps<{
  data: {
    id: string
    arrKey: string
    Icon: string
    name: string
    num: string
  }[]
  indexMainList: string
}>()

const emit = defineEmits(['onHandleList'])
const onHandleList = (arrKey: string, id) => {
  emit('onHandleList', arrKey, id)
}
</script>
